<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="取件作业" name="first">
      <el-row loading>
    <el-col :span="24">
       <fpkdy-add ref="fpkdyAdd"></fpkdy-add >
      <el-row >
         <el-col :span="6">
           <el-input placeholder="请输入运单编号" size="small" style="width:100%">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请输入快递员姓名" size="small" style="width:100%"></el-input>
        </el-col>
        <el-col :span="12">
          <template>
            <span>发件人地址:</span>
          <el-select  style="width:20%">
            <!-- <el-option
              v-for="item in parentFleet"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"></el-option> -->
          </el-select>
           <el-select style="width:20%"></el-select>
          <el-select style="width:20%"></el-select>
          </template>
        </el-col>
        <el-col :span="6">
           <el-input placeholder="请输入发件人姓名" size="small" style="width:100%">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select  style="width:100%" placeholder="请输入作业状态"></el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="danger"  size="small" @click="queryAll()">搜索</el-button>
        </el-col>
        <el-col :span="24" style="text-align: left;">
          <el-button  icon="el-icon-plus" type="danger" @click="handleCreateKdy()" v-show="add">分配快递员</el-button>
        </el-col>
      </el-row>
      </el-col>
       <el-col :span="24">
          <el-table :data="tableData1" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="" label="取件作业编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="运单编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="快递员分配状态" header-align="center"></el-table-column>
            <el-table-column prop="" label="下单时间" header-align="center"></el-table-column>
            <el-table-column prop="" label="作业状态" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="快递员姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="发件人姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="发件人电话" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="发件人地址" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="计划取件时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="完成时间" header-align="center" align="center"></el-table-column>
          </el-table>
          <el-row>
        <el-col :span="24">
         <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :current-page.sync="page"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </el-col>
      </el-row>
        </el-col>
</el-row>
    </el-tab-pane>
    <el-tab-pane label="派件作业" name="second">
      <el-row loading>
    <el-col :span="24">
       <fpkdy-add ref="fpkdyAdd"></fpkdy-add >
      <el-row >
         <el-col :span="6">
           <el-input placeholder="请输入运单编号" size="small" style="width:100%">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请输入快递员姓名" size="small" style="width:100%"></el-input>
        </el-col>
        <el-col :span="12">
          <template>
            <span>收件人地址:</span>
          <el-select  style="width:20%">
            <!-- <el-option
              v-for="item in parentFleet"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"></el-option> -->
          </el-select>
           <el-select style="width:20%"></el-select>
          <el-select style="width:20%"></el-select>
          </template>
        </el-col>
        <el-col :span="6">
           <el-input placeholder="请输入收件人姓名" size="small" style="width:100%">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select  style="width:100%" placeholder="请输入作业状态"></el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="danger"  size="small" @click="queryAll()">搜索</el-button>
        </el-col>
        <el-col :span="24" style="text-align: left;">
          <el-button  icon="el-icon-plus" type="danger" @click="handleCreateKdy()" v-show="add">分配快递员</el-button>
        </el-col>
      </el-row>
      </el-col>
       <el-col :span="24">
          <el-table :data="tableData2" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="" label="派件作业编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="运单编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="快递员分配状态" header-align="center"></el-table-column>
            <el-table-column prop="" label="下单时间" header-align="center"></el-table-column>
            <el-table-column prop="" label="作业状态" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="快递员姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="收件人姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="收件人电话" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="收件人地址" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="计划取件时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="完成时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="签收状态" header-align="center" align="center"></el-table-column>
          </el-table>
          <el-row>
        <el-col :span="24">
         <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :current-page.sync="page"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </el-col>
      </el-row>
        </el-col>
</el-row>
    </el-tab-pane>
    <el-tab-pane label="已取消" name="third">
      <el-col :span="24">
          <el-table :data="tableData3" border style="width: 100%">
            <el-table-column prop="" label="作业编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="运单编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="快递员分配状态" header-align="center"></el-table-column>
            <el-table-column prop="" label="下单时间" header-align="center"></el-table-column>
            <el-table-column prop="" label="作业状态" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="快递员姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="取消时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="发件人姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="发件人电话" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="发件人地址" header-align="center" align="center"></el-table-column>
          </el-table>
      </el-col>
        <el-col :span="24">
         <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :current-page.sync="page"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </el-col>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import FpkdyAdd from '@/components/fpkdy/fpkdyAdd'

  export default {
    data() {
      return {
        activeName: 'first',
        tableData1:[{}],
        tableData2:[{}],
        tableData3:[{}],
        loading: true,
        pageSize:2,//每页显示的条数
        page:1,//第一页
        counts:0 ,//共几条
        ids:[],
        add:true
      };
    },
    methods: {
      currentChange(val){
        this.page=val;
        this.queryAll();
      },
      handleSizeChange(val) {
        this.pageSize=val;
        this.queryAll();
        },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },

      //分配快递员
      handleCreateKdy(){
        if (this.ids == null || this.ids.length == 0) {
        this.$alert("请先选择一条要分配的作业", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        //请求后台
        this.loading = true
        this.$refs.fpkdyAdd.$emit('openAddfpkdyDialog')
        this.loading = false
      }
      },
    },
    components:{FpkdyAdd}
  };
</script>
